<template>
  <el-card>
    <div slot="header" class="header">
      <div class="category-header">
        <span>销售类别占比</span>
        <el-radio-group v-model="radio4" size="mini">
          <el-radio-button label="全部渠道"></el-radio-button>
          <el-radio-button label="线上"></el-radio-button>
          <el-radio-button label="门店"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div>
      <div class="charts" ref="charts"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      listState: (state) => state.home.list,
    }),
  },
  data() {
    return {
      radio4: "全部渠道",
      mycharts: null,
      onlineList: [],
      shopList: [],
      saleRank: [],
    };
  },
  mounted() {
    this.mycharts = echarts.init(this.$refs.charts);
    this.mycharts.setOption({
      title: {
        text: "",
        subtext: "",
        left: "center",
        top: "center",
      },
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          data: [],
        },
      ],
    });
    this.mycharts.on("mouseover", (params) => {
      const { name, value } = params.data;
      this.mycharts.setOption({
        title: {
          text: name,
          subtext: value,
        },
      });
    });
  },
  watch: {
    radio4() {
      if (this.radio4 == "线上") {
        this.mycharts.setOption({
          title: {
            text: this.shopList[0].name,
            subtext: this.shopList[0].value,
          },
          series: [
            {
              data: this.shopList,
            },
          ],
        });
      } else if (this.radio4 == "门店") {
        this.mycharts.setOption({
          title: {
            text: this.onlineList[0].name,
            subtext: this.onlineList[0].value,
          },
          series: [
            {
              data: this.onlineList,
            },
          ],
        });
      } else {
        this.mycharts.setOption({
          title: {
            text: this.saleRank[0].name,
            subtext: this.saleRank[0].value,
          },
          series: [
            {
              data: this.saleRank,
            },
          ],
        });
      }
    },
    listState() {
      this.onlineList = this.listState.saleRank.online.name.map((name, i) => ({
        name,
        value: this.listState.saleRank.online.value[i],
      }));
      this.shopList = this.listState.saleRank.shop.name.map((name, i) => ({
        name,
        value: this.listState.saleRank.shop.value[i],
      }));
      this.onlineList.forEach((item) => {
        this.shopList.forEach((item2) => {
          if (item.name == item2.name) {
            this.saleRank.push({
              name: item.name,
              value: item.value + item2.value,
            });
            return;
          }
        });
      });
      //   this.saleRank = this.onlineList.concat(this.shopList);
      this.mycharts.setOption({
        title: {
          text: this.saleRank[0].name,
          subtext: this.saleRank[0].value,
        },
        series: [
          {
            data: this.saleRank,
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.header {
  border-bottom: 1px solid #eee;
  padding-top: -15px;
}
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.charts {
  width: 100%;
  height: 255px;
}
</style>
